<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red
    }

    .blue {
      color: blue
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>大家好，我是{{name}},{{description}}</h1>
    <h3>下面是我的介绍：</h3>
    <p>{{description}},{{finallyWrite}}</p>
    <span>obj中的x为：{{obj.x}}</span><button @click="addnum">点击增加</button>
    <br>
    <span>更改介绍：</span><input type="text" v-model="description" v-on:keydown="sayhello">
    <span>更改obj中的x：</span><input type="text" v-model="obj.x">
    <h3>人员表：</h3>
    <ul>
      <li v-for="(key,index) in list">
        {{key.name}}：{{key.age}}岁
        <p>{{key.type}}</p>
      </li>
    </ul>
    <img v-bind:src="picSrc">
    <p :class="redColor">v-bind测试：红色</p>
    <p :class="{blue: obj.x <= 2, red: obj.x > 2}">v-bind测试：蓝色</p>
  </div>
  <script type="module">
    import Hue from './core/index.js'
    window.test = new Hue({
      el: 'app',
      data: {
        name: 'hurongchao',
        description: 'hurongchao says sth',
        finallyWrite: 'GoodBye',
        obj: {
          x: 1,
          y: 2
        },
        list: [{ name: 'piaoduandiao', age: 18, type: '-----------------' }, { name: 'caixukun', age: 30, type: '-----------------' }],
        picSrc: './src/test.jpg',
        redColor: 'red'
      },
      methods: {
        sayhello: function () {
          console.log('hello', this)
        },
        addnum() {
          this.obj.x++
        }
      },
      created() {
        console.log('created完成', this)
      }
    })
  </script>
</body>

</html>